<template>
	<view class="content">
		<!-- 电量显示栏-->
		
		<view class="top_nav">
			<view class="kong"></view>
		
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">卡片管理</view>
				<view class="return"></view>
			</view>
		</view>
		
		<view class="card_management">
			<view class="top_tab">
				<view v-for="(item,index) in tab_top" :key='index' @click="changeTab(index)" :class="currentIndex == index?'tab_active':'tab_item'">{{item.name}}</view>
			</view>
			
			<view class="brand_card" v-for="(item,index) in tab_top" :key='index' v-if="currentIndex == index">
				<view class="card_item" v-for="(item1,index1) in item.card" :key="index1">
					<view class="card_img" @click="chooseCard">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/list/ka2.png"></image>
						<view class="card_content">
							<view class="card_wrap">
								<view class="card_top">
									<view class="top_left">
										<view class="brand_icon">
											<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/mycenter/touxiang.png"></image>
										</view>
										<view class="brand_wrap">
											<view class="brand_name">{{item1.bank_name}}</view>
											<view class="brand_pinyin">{{item1.brand_pinyin}}</view>
											<view class="card_type">{{item1.card_name}}</view>
										</view>
									</view>
									
									<view class="top_right">{{item1.cardno}}</view>
									<view style="color: #ff0000;float: right;"  @tap="open(0, 'center',item1,index1)">
										删除
									</view>
									
								</view>
								<view class="card_bottom">每日转账支付限额{{item1.money}}元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<openAlert class='openAlert' ref="openAlert" BgColor='rgba(0, 0, 0, 0.7)' :AlertClass="AlertClass" :AlertPosition="AlertPosition">
			    <view class="modal_wrap">
					<view class="modal_title">温馨提示</view>
					
					<view class="modal_content">
						<view class="con_item">是否要删除银行卡？</view>
					</view>
					<view class="btn_wrap">
						<view class="cancel_btn" @click.stop="cancel">取消</view>
						<view class="modal_btns"  @click="del">删除</view>
					</view>
			    </view>
			</openAlert>
			<!-- 添加信用卡 -->
			<view class="addCard" @click="toAddBrandCard">
				<view class="add_wrap">
					<view class="add_left" v-if="tab_top[1]['card'].length==0 && currentIndex==1">+添加储蓄卡</view>
					<view class="add_left" v-else-if="currentIndex==1">+更换银行卡</view>
					<view class="add_left" v-else-if="currentIndex==0">+添加信用卡</view>
					<view class="add_right">
						<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/mycenter/right.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import openAlert from '@/components/open-alert/open-alert.vue';
	export default {
		components: {openAlert},
		data() {
			return {
				card_id:0,
				AlertClass: 0,
				AlertPosition: '',
				source:null,
				currentIndex:0,
				souce:0,
				tab_top:[
					{
						name:'信用卡',
						card:[
							// {
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka1.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'信用卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// }
						]
					},{
						name:'储蓄卡',
						card:[
							// {
							// 	card_img:'../../static/list/ka2.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'储蓄卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// },{
							// 	card_img:'../../static/list/ka1.png',
							// 	brand_icon:'../../static/mycenter/touxiang.png',
							// 	brand_name:'工商银行',
							// 	brand_pinyin:'GONGSHANG BANK',
							// 	card_type:'储蓄卡',
							// 	card_no:'58886283892020283',
							// 	money:'50000'
							// }
						]
					}
				],
				xsouce:0,
				index:0,
				next:null
			}
		},
		
		onShow(){
			var options = this.Unfold_data.getCurPageOption();
			if(options.souce){
				this.souce = options.souce
				this.changeTab(this.souce)
			}else{
				this.changeTab(this.currentIndex)
			}
			if(options.xsouce){
				this.xsouce = options.xsouce;
				this.currentIndex = this.xsouce
			}
			//赋值source
			if(options.source){
				this.source = options.source
			}
		},
		
		onLoad(options){
			this.token=options.token
			this.shop_id=options.shop_id
			
		},
		methods: {
			//打开提示框
			open(Class, Position,item,index1) {
				this.$nextTick(function() {
					this.AlertClass = Class;
					this.AlertPosition = Position;
					this.card_id = item.id;
					this.type = item.name;
					this.next = index1;
					this.$nextTick(function() {
						// console.log(this.$refs)
						this.$refs.openAlert.Show();
					});
				});
			},
			//关闭提示框
			cancel(){
				this.$nextTick(function() {
					this.$refs.openAlert.Close();
				});
			},
			//跳转上一页
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			   },
			   //分类获取银行卡列表
			changeTab(index){
				
				this.index = index;
				if(this.xsouce==1){
					if(index!=1){
						this.Unfold_data.showWindow('只能添加储蓄卡');
						return
					}
					
				}
				this.currentIndex = index;
				// var userInfo = uni.getStorageSync('userInfo');
					let params={
						token:this.token
					};
					
				var url ='/api/bankcard/bankcard/creditCardList'
				this.Unfold_data.upload_data(params, 'GET', url, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						// 成功跳转下载页面
						// this.tab_top = res.data.data
						this.tab_top[0].card =res.data.data.creditCard 
						this.tab_top[1].card =res.data.data.depositCard
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			toAddBrandCard(){
				var url = '/pages/addBrandCard/addBrandCard?souce='+this.currentIndex
				//
				if(this.source=='not_card'){
					url = '/pages/addBrandCard/addBrandCard?source=not_card&souce='+this.currentIndex
				}else if(this.xsouce==1){
					url = '/pages/addBrandCard/addBrandCard?source=1&souce='+this.currentIndex
				}
				sui.navigateTo({
					url:url
				})
			},
			del(){
				//默认银行卡
				// this.default = 1;
				
				if(this.card_id!=0){
					// var userInfo = uni.getStorageSync('userInfo');
					let params ={
						token:this.token,
						id:this.card_id
					};
					var url = '/api/bankcard/bankcard/del'
					this.Unfold_data.upload_data(params, 'POST', url, res => {
						if (res.statusCode == 200 && res.data.code == 1) {
							// 成功跳转下载页面
							this.Unfold_data.showWindow(res.data.msg);
							if(this.index==0){//信用卡
								this.tab_top[0].card.splice(this.next,1);
							}else if(this.index==1){//储蓄卡
								console.log(this.next);
								this.tab_top[1].card.splice(this.next,1);
							}
							//关闭弹框
							this.cancel()
						} else {
							this.Unfold_data.showWindow(res.data.msg);
						}
					});
				}
			},
			chooseCard(){
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: #25262b;
	}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.card_management{
		width: 90%;
		margin: 0 auto;
		margin-top: 220upx;
		.top_tab{
			width: 100%;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.tab_active{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 60upx;
				background: linear-gradient(top,#f2e0b7,#a3844a);
			}
			.tab_item{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 60upx;
				color: #FFFFFF;
			}
		}
		.brand_card{
			width: 100%;
			// margin-top:230upx;
			.card_item{
				margin-top: 10upx;
				.card_img{
					width: 680upx;
					height: 347upx;
					border-radius: 20upx;
					box-shadow: 0 0 40upx #666666;
					position: relative;
					image{
						width: 100%;
						height: 347upx;
						border-radius: 20upx;
					}
					.card_content{
						width: 100%;
						height: 347upx;
						position: absolute;
						left: 0;
						top: 0;
						.card_wrap{
							width: 95%;
							margin: 0 auto;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							.card_top{
								flex: 4;
								display: flex;
								margin-top: 30upx;
								.top_left{
									flex: 3;
									display: flex;
									justify-content: center;
									.brand_icon{
										flex: 1;
										image{
											width: 50upx;
											height: 50upx;
											border-radius: 50%;
										}
									}
									.brand_wrap{
										flex: 4;
										.brand_name{
											font-size: 34upx;
										}
										.brand_pinyin{
											font-size: 24upx;
										}
										.card_type{
											margin: 20upx 0;
											font-size: 28upx;
										}
									}
								}
								.top_right{
									flex: 2;
									font-size: 28upx;
								}
							}
							.card_bottom{
								flex: 1;
								font-size: 26upx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
		.openAlert{
			width: 100%;
			.modal_wrap{
				width: 75vw;
				height: 350upx;
				background-color: #FFFFFF;
				border-radius: 20upx;
				.modal_title{
					width: 100%;
					height: 80upx;
					// background: #f0deb5;
					background: linear-gradient(#f0deb5,#a88950); /* 标准语法 */
					border-radius: 20upx 20upx 0 0;
					color: #000000;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.modal_content{
					width: 70%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 40upx 0;
					.con_item{
						text-align: center;
						font-size: 30upx;
					}
				}
				
				.btn_wrap{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.cancel_btn{
						width: 200upx;
						margin: 0 auto;
						height: 60upx;
						margin-top: 20upx;
						border: 2upx solid #f0deb5;
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.modal_btns{
						width: 200upx;
						margin: 0 auto;
						height: 60upx;
						margin-top: 20upx;
						background: linear-gradient(top,#f0deb5,#a88950);
						color: #000000;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
			}
		}
		.addCard{
			width: 100%;
			height: 80upx;
			background: #41414d;
			border-radius: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20upx;
			.add_wrap{
				width: 95%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				.add_left{
					flex: 1;
					color: var(--themeColor);
				}
				.add_right{
					flex: 1;
					text-align: right;
					image{
						width: 30upx;
						height: 30upx;
					}
				}
			}
		}
	}
}
</style>
